<template>
  <div class="swiper-box">
    <div class="swiper-container swiper-container-h">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-content" v-for="(item, index) in list" :key="index" :class="'a' + index">
          <keep-alive>
            <component :is="item.component"></component>
          </keep-alive>
        </div>
      </div>
    </div>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
import Mine from '@/components/mine.vue'
import Find from '@/components/find.vue'
import Clouds from '@/components/clouds.vue'
import Videos from '@/components/videos.vue'
import Swiper from '@/assets/js/swiper.min.js'
import '@/assets/css/swiper.min.css'
export default {
  mounted () {
    var that = this
    var mySwiper = new Swiper('.swiper-container-h', {
      // initialSlide: this.$route.path === '/mine' ? 0 : this.$route.path === '/find' ? 1 : this.$route.path === '/clouds' ? 2 : this.$route.path === '/videos' ? 4 : 0,
      onSlideChangeEnd: function (swiper) {
        // alert(swiper.activeIndex)
        console.log(that)
        that.$root.eventHub.$emit('slideTab', swiper.activeIndex)
      }
    })
    // mySwiper.on('slideChangeTransitionEnd', () => {
    //   // this.$root.eventHub.$emit('slideTab', mySwiper.activeIndex)
    //   console.log(66)
    // })
    // console.log(this)
    this.$root.eventHub.$on('changeTab', (index) => {
      // console.log(index)
      mySwiper.slideTo(index, 0, false)
    })
    // console.log(mySwiper)
  },
  components: {
    Mine,
    Find,
    Clouds,
    Videos
  },
  data () {
    return {
      list: [
        { path: '/mine', component: Mine },
        { path: '/find', component: Find },
        { path: '/clouds', component: Clouds },
        { path: '/videos', component: Videos }
      ]
    }
  }
}
</script>

<style scoped lang="less">
.swiper-box {
  height: 100%;
  /*position: absolute;*/
  top: 80px;
}
.swiper-content {
  /*position: relative;*/
  top: 80px;
}
.a2 {
  height: 100%
}
.swiper-container-h {
  height: 100%;
}
</style>
